<template>

    <mi-list-page>

        <mi-table :list="list">
            <template #topBar>
                <div class="d_flex flex_jc_sb">
                    <mi-top-bar
                        :data="topToolbar"
                    >
                    </mi-top-bar>

                    <mi-search-page :search="search">

                    </mi-search-page>
                </div>
            </template>
        </mi-table>

    </mi-list-page>

    <mi-dialog v-model="detail.show" title="会员信息">
        <user-detail :id="list.currentRow?.id" />
    </mi-dialog>

    <user-edit />

</template>

<script setup lang="ts">

import { provide, reactive, ref} from "vue"
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import {useRoute} from "vue-router";
import List from "@/model/list";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import Search from "@/model/search";
import UserEdit from "@/views/site/user/userEdit.vue";
import UserDetail from "@/views/site/user/userDetail.vue";

const route = useRoute()
const initWhere = Object.assign({}, route.query)
const tdWidth = global.tdWidth
const auth = makeModelAuth('site.user')

// toolbar 事件
const topToolbar = [
    {
        auth: auth.add,
        type: 'success',
        icon: 'Plus',
        title: '新增',
        event: async (ids:Array<number>) => {
            edit.info = {}
            edit.show = true
        }
    },
]

const lineToolbar = [
    {
        auth: auth.edit, title: '详情', event: (row:any) => {
            list.currentRow = row
            detail.show = true
        }
    },
    {
        auth: auth.edit, title: '编辑', event: (row:any) => {
            edit.info = row
            edit.show = true
        }
    },
    {
        auth: auth.del, title: '禁用', event: (row:any) => {
            // todo: 这里是禁用操作
        }
    },
]

const list = reactive(new List({
    where: initWhere,
    url: `/${auth.index}`,
    columns:[
        {name: "select", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "nickname", title:"昵称"},
        {name: "mobile", title:'手机号'},
        {name: "balance", title:'余额'},
        {name: "points", title:'积分'},
        {name: "reward", title:'佣金'},
        // {name: "status", title:'状态', width:tdWidth.min},
        {name: "create_time", title:'注册时间'},
        {title: "操作", type:'toolbar',toolbar:lineToolbar},
    ]
}))

const edit = reactive(new Edit({}))
const detail = reactive(new Edit({}))

const searchRef = ref<FormInstance>()
const search = reactive(new Search({
    list:list,
    searchRef:searchRef.value
}))


provide("list", list)
provide("edit", edit)
provide("detail", detail)



</script>

<style scoped>

</style>
